<template>
  <div class="DataOverview">
    <div class="cardList">
      <div class="card">
        <dv-border-box-10 style="width: 100%; height: 100%">
          <p class="cardTitle">待支付数量：</p>
          <p class="cardValue">{{ CardData[0].order_pending__count }}</p>
        </dv-border-box-10>
      </div>
      <div class="card">
        <dv-border-box-10
          ><p class="cardTitle">已完成数量：</p>
          <p class="cardValue">
            {{ CardData[0].order_completed__count }}
          </p></dv-border-box-10
        >
      </div>
      <div class="card">
        <dv-border-box-10
          ><p class="cardTitle">退货申请数量：</p>
          <p class="cardValue">
            {{ CardData[0].return_requested__count }}
          </p></dv-border-box-10
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getCard } from "@/api/visualization.js";

export default {
  name: "DataOverview",
  data() {
    return {
      CardData: [
        {
        order_pending__count: "",
        order_completed__count: "",
        return_requested__count: "",
      },
      ]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getCard().then((res) => {
        this.CardData = res.data;
        console.log(this.CardData);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.DataOverview {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 200px;
  .cardList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-around;
  }
  .card {
    width: 210px;
    height: 55%;
    position: relative;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    .cardTitle {
      font-weight: 600 !important ;
      color: rgb(238, 241, 250);
      margin-left: 5%;
      margin-top: 5%;
      padding-top: 20px;
      text-align: center;
      font-size: 25px;
    }
    .cardValue {
      font-size: 26px;
      font-weight: 600;
      position: absolute;
      left: 50%;
      top: 50%;
      padding-top: 10px;
      transform: translateX(-50%);
      color: rgb(126, 211, 244);
    }
  }
}
</style>
